<template>
    <div class="home">
        <div id="content" ref="content" :style="[contentStyles]">
            <div id="content-box">
                <intro-card id="intro-card" :userData="userData"></intro-card>
                <div id="content-box-list">
                    <content-card :dataList="artList"></content-card>
                    <div class="page">
                        <button class="page-btn pull-left" @click="pageChange(false)" v-show="page.pageNumber !== 1">上</button>
                        <button class="page-btn pull-right" @click="pageChange(true)" v-show="!page.isLastPage">下</button>
                    </div>
                </div>
            </div>
            <!--<div>-->
            <!--<button @click="showArticleDialog">写文章</button>-->
            <!--</div>-->
        </div>
        <!--<el-dialog title="增加文章" :visible.sync="isShowDialog">-->
        <!--<el-form :model="articleForm">-->
        <!--<el-form-item label="文章标题">-->
        <!--<el-input v-model="articleForm.article_title"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="文章内容">-->
        <!--<el-input type="textarea" v-model="articleForm.article_content"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-button type="primary" @click="addArticle">提交</el-button>-->
        <!--</el-form>-->
        <!--</el-dialog>-->
    </div>
</template>

<script>
import { HeaderBar, FooterBar } from '../components/Layout/index'
import IntroCard from '../components/Intro-Card'
import ContentCard from '../components/Content-Card'
import { ArticlesApi, UserApi } from '../api'
import moment from 'moment'

export default {
    name: 'Home',
    components: {
        HeaderBar,
        FooterBar,
        IntroCard,
        ContentCard
    },
    computed: {},
    data () {
        return {
            artList: [],
            isShowDialog: false,
            contentStyles: {},
            userData: {},
            page: {
                pageNumber: 1,
                pageSize: 5,
                total: 0,
                isShowPagination: true,
                isLastPage: true
            },
            articleForm: {
                article_type: {
                    article_type_id: 1
                },
                article_author: {
                    user_id: 10000
                },
                article_content: '',
                article_info: '',
                article_title: ''
            }
        }
    },
    methods: {
        showArticleDialog () {
            this.isShowDialog = !this.isShowDialog
        },
        addArticle () {
            const _this = this
            this.articleForm.article_info = this.articleForm.article_content
            if (this.articleForm.article_title === '' || this.articleForm.article_info === '' || this.articleForm.article_content === '') {
                this.$message('文章不能为空')
                return
            }
            ArticlesApi.addArticles(this.articleForm).then(res => {
                if (res.data.status === 200) {
                    _this.showArticleDialog = false
                    _this.$message('添加文章成功')
                    _this.getArticles()
                }
            })
        },
        /**
         * 监听下一页或者上一页按钮的点击
         */
        pageChange (isNext) {
            this.page.pageNumber = isNext ? this.page.pageNumber + 1 : this.page.pageNumber - 1
            this.getArticles(this.page.pageNumber)
        },
        /**
         * 获取文章列表
         */
        getArticles (index) {
            this.page.pageNumber = index || 1
            ArticlesApi.getArticlesByPages({
                page_number: this.page.pageNumber,
                page_size: this.page.pageSize
            }).then(res => {
                if (res.data.status === 200) {
                    let articles = res.data.data.result
                    articles.forEach(function (art) {
                        if (art.article_create_time) {
                            art.article_create_time = moment(art.article_create_time).format('YYYY-MM-DD')
                        }
                    }, this)
                    this.artList = articles
                    this.page.total = res.data.data.total
                    this.page.isShowPagination = this.page.total > this.page.pageNumber
                    this.page.isLastPage = this.page.pageNumber === res.data.data.total_page
                    const _this = this
                    setTimeout(function () {
                        _this.setContentHeight()
                    }, 10)
                }
            })
        },
        getBaseData () {
            UserApi.getUser(10000).then(res => {
                if (res.data.status === 200) {
                    this.userData = res.data.data
                }
            })
        },
        /**
         * 设置content高度
         */
        setContentHeight () {
            let winHeight = 0
            if (window.innerHeight) {
                winHeight = window.innerHeight
            } else if ((document.body) && (document.body.clientHeight)) {
                winHeight = document.body.clientHeight
            }
            let contentHeight = this.$refs.content.getBoundingClientRect().height
            if ((winHeight - 170) > contentHeight) {
                this.contentStyles = {
                    'height': winHeight - 170 + 'px'
                }
            }
        }
    },
    mounted () {
        this.$nextTick(function () {
            this.getArticles()
            this.getBaseData()
        })
    }
}
</script>

<style lang="scss">
@import "./style/index.scss";
</style>
